<template>
  <div id="app" class="bg-gray-100">
    <div class="shadow bg-white">
      <div class="container mx-auto max-width flex justify-between">
        <a href="https://www.lufuhu.com" target="_blank">
          <div class="flex items-center py-5">
            <img class="w-6 h-6 mr-2" src="../assets/logo.png">
            <div>LUFUHU的博客</div>
          </div>
        </a>
        <div class="flex">
          <el-button type="text">登录</el-button>
        </div>
      </div>
    </div>
    <div class="container mx-auto max-width py-8 content-h">
      <router-view></router-view>
    </div>
    <div class="border-t bg-black text-gray-300 text-sm">
      <div class="container mx-auto max-width py-5">
        <div class="flex items-center">
          <div class="flex-1 text-right">
            <a target="_blank" href="https://beian.miit.gov.cn">
              <p>鄂ICP备2021009343号-1 </p>
            </a>
          </div>
          <div class="mx-2 w-1 h-4 border-r-2 border-gray-400"></div>
          <div class="flex-1">
            <a class="flex items-center" target="_blank"
               href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011202001971">
              <img class="w-5 h-5 mr-1" src="https://www.lufuhu.com/static/icon/gongan.png"/>
              <p>鄂公网安备 42011202001971号</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>
.max-width {
  max-width: 1200px !important;
}

.content-h {
  min-height: calc(100vh - 125px);
}
</style>